<template>
  <view class="salary-box">
    <u-navbar back-text="返回" :title="title"></u-navbar>
    <view v-if="activeType==0" class="header-title">
      {{ salaryInfo.basicPrompt }}
    </view>
    <view v-if="activeType==1" class="header-title">
      {{ salaryInfo.workAgePrompt }}
    </view>
    <view v-if="activeType==2" class="header-title">
      {{ salaryInfo.attendPrompt }}
    </view>
    <view v-if="activeType==3" class="header-title">
      {{ salaryInfo.contributePrompt }}
    </view>
    <view class="salary-box-inner">
      <u-card   :border="false">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="text-align: center;display: flex;align-items: center ;padding-left:10rpx;">目标</h2>
          </view>
        </view>
        <view class="" slot="body">
          <view v-if="activeType ==0 ">
            <view style="display: flex;align-items: center">
              门槛单量 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.basicAmountThreshold }}单</text>
            </view>
          </view>
          <view v-if="activeType==3">
            <view style="display: flex;align-items: center">
              特殊贡献奖门槛单量 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.contributeAmountThreshold }}单</text>
            </view>
          </view>
          <view v-if="activeType==1">
            <view style="display: flex;align-items: center">
              工龄奖门槛单量 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAgeAmountThreshold }}单</text>
            </view>
          </view>
          <view v-if="(activeType==0 || activeType==2) && (salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1)">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              有效出勤 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendThreshold }}天</text>
            </view>
          </view>
          <view style="display: flex;align-items: center" v-if="activeType==0">
            目标达成底薪 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.basicMaxSalary }}元</text>
          </view>
          <view v-if="activeType==1">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              工龄标准 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAgeStandard }}月</text>
            </view>
          </view>
          <view style="display: flex;align-items: center" v-if="activeType==1">
            达成工龄奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAgeAllReward }}元</text>
          </view>
          <view v-if="activeType==2 && (salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1) ">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center">
              可调休天数 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.restRemain }}天</text>
            </view>
          </view>
          <view style="display: flex;align-items: center" v-if="activeType==2  && (salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1)">
            达成全勤奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendAllReward }}元</text>
          </view>
<!--          <view style="display: flex;align-items: center" v-if="activeType==2 && salaryInfo.workAge == 0">-->
<!--            新人全勤奖封顶值 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendNewMax }}元</text>-->
<!--          </view>-->
          <view style="display: flex;align-items: center" v-if="activeType==2 &&  salaryInfo.workAge == 0 && salaryInfo.isNewRider == 1 ">
            达成全勤奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;"> {{ salaryInfo.attendAllReward }}元 * 有效出勤天数</text>
          </view>
          <view style="display: flex;align-items: center" v-if="activeType==3">
            达成贡献奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.contributeAllReward }}元</text>
          </view>
        </view>
      </u-card>
      <u-card   :border="false">
        <view slot="head" >
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="text-align: center;display: flex;align-items: center ;padding-left:10rpx;">达成</h2>
          </view>
        </view>
        <view class="" slot="body">
          <view v-if="activeType==0">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center" >
              目前已完成单量<text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.amount }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.basicAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.basicAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType==1">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center" >
              工龄奖目前已完成单量<text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.amount }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.workAgeAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.workAgeAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType==3">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center" >
              特殊贡献奖目前已完成单量<text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.amount }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.contributeAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.contributeAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType==0 || activeType==2">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center">
              目前已达成有效出勤<text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attend }}天</text>
            </view>
            <u-line-progress v-if="(salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1)" :active-color="calculateFunc3(salaryInfo.attendThreshold,salaryInfo.attend)" :striped="true" :percent="calculateFunc2(salaryInfo.attendThreshold,salaryInfo.attend)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType==1">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              目前工龄<text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAge }}个月</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.workAgeStandard,salaryInfo.workAge)" :striped="true" :percent="calculateFunc2(salaryInfo.workAgeStandard,salaryInfo.workAge)" :striped-active="true" ></u-line-progress>
          </view>
        </view>
      </u-card>
      <u-card   :border="false">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="text-align: center;display: flex;align-items: center ;padding-left:10rpx;">结果</h2>
          </view>
        </view>
        <view class="" slot="body">
          <view>
            <view style="display: flex;align-items: center" v-if="activeType==0">
              目标达成底薪 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.basicMaxSalary }}元</text>
            </view>
            <view style="display: flex;align-items: center" v-if="activeType==1">
              目标达成工龄奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAgeAllReward }}元</text>
            </view>
            <view style="display: flex;align-items: center" v-if="activeType==2 && (salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1)">
              目标达成全勤奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendAllReward }}元</text>
            </view>
            <view style="display: flex;align-items: center" v-if="activeType==2 && salaryInfo.workAge == 0 && salaryInfo.isNewRider == 1">
              新人全勤奖封顶值 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendNewMax }}元</text>
            </view>
            <view style="display: flex;align-items: center" v-if="activeType==3">
              目标贡献奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.contributeAllReward }}元</text>
            </view>
          </view>
          <view v-if="activeType == 0">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              目前底薪 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.basicSalary }}元 <text style="font-size: 24rpx">（{{`单价${salaryInfo.basicSingleSalary}元*单量${salaryInfo.amount}单`}}）</text> </text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.basicMaxSalary,salaryInfo.basicSalary)" :striped="true" :percent="calculateFunc2(salaryInfo.basicMaxSalary,salaryInfo.basicSalary)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType == 1">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              目前工龄奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAgeReward }}元</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.workAgeAllReward,salaryInfo.workAgeReward)" :striped="true" :percent="calculateFunc2(salaryInfo.workAgeAllReward,salaryInfo.workAgeReward)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType == 2">
            <view style="display: flex;align-items: center">
              目前全勤奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.attendReward?salaryInfo.attendReward:0 }}元</text>
            </view>
            <u-line-progress v-if="salaryInfo.workAge != 0 || salaryInfo.isNewRider != 1"  :active-color="calculateFunc3(salaryInfo.attendAllReward,salaryInfo.attendReward)" :striped="true" :percent="calculateFunc2(salaryInfo.attendAllReward,salaryInfo.attendReward)" :striped-active="true" ></u-line-progress>
            <u-line-progress v-if="salaryInfo.workAge == 0 && salaryInfo.isNewRider == 1 "  :active-color="calculateFunc3(salaryInfo.attendNewMax,salaryInfo.attendReward)" :striped="true" :percent="calculateFunc2(salaryInfo.attendNewMax,salaryInfo.attendReward)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-if="activeType == 3">
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              目前贡献奖 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.contributeReward }}元</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.contributeAllReward,salaryInfo.contributeReward)" :striped="true" :percent="calculateFunc2(salaryInfo.contributeAllReward,salaryInfo.contributeReward)" :striped-active="true" ></u-line-progress>
          </view>
        </view>
      </u-card>


    </view>
  </view>
</template>

<script>
export default {
  name: "salary-webIndex",
  data() {
    return {
      title: '',
      proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),
      salaryInfo:{},
      activeType:0,
      riderId:''
    };
  },
  onLoad(option){
    this.activeType = option.type
    this.title = option.title
    this.riderId = option.riderId
    this.init()
  },
  methods:{
    async init() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      let data = await this.$api.dormitory.storeRiderId(this.riderId)
      this.salaryInfo = data
      uni.hideLoading();
    },
    toSalatyChildren(e) {
      uni.navigateTo({
        url: `/pages/user/salary-children/webIndex?type=${e}`
      })
    },
    calculateFunc(v1,v2,f){
      let num = Number(v1?v1:0) - Number(v2?v2:0)
      return num<0?0:num
    },
    calculateFunc2(v1,v2){
      let n = (Number(v2?v2:0)/Number(v1?v1:0))
      let num = ((Number.isNaN(n) ? 0 : n).toFixed(2))*100
      return  num>100?100:Math.round(num)
    },
    calculateFunc3(v1,v2){
      let n = (Number(v2?v2:0)/Number(v1?v1:0))
      let num = ((Number.isNaN(n) ? 0 : n).toFixed(2))*100
      return  num>=100?'#19be6b':'#2979ff'
    },
    daysUntilEndOfMonth(e) {
      // 获取当前日期
      const today = new Date();
      // 获取当前月份和年份
      const year = today.getFullYear();
      const month = today.getMonth(); // 月份是从0开始的，所以1月是0, 2月是1, 以此类推
      // 创建一个表示下一个月的日期对象
      const nextMonth = month + 1;
      const nextMonthFirstDay = new Date(year, nextMonth, 1);
      // 计算本月最后一天的日期
      const endOfMonth = new Date(nextMonthFirstDay - 1);
      // 计算天数差
      const daysUntilEnd = Math.ceil((endOfMonth - today) / (1000 * 60 * 60 * 24));
      // 获取本月最后一天的日期中的“日期”部分，即为本月总天数
      const daysInCurrentMonth = endOfMonth.getDate();
      // 获取当前日期中的“日期”部分，即为今天是本月的第几天
      const dayOfMonth = today.getDate();
      return e==1?daysUntilEnd:e==2?daysInCurrentMonth:dayOfMonth;
    }
  }
}
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

/deep/.u-card__head{
  padding: 20rpx 30rpx!important;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
.salary-box{
  height: 100vh;
  background: #f5f5f5;
  overflow: auto;
  //padding: 30rpx;
}

.salary-box-inner-item{
  width: 100%;
  height: 500rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  background: #FFFFFF;
}

.header-title{
  font-size: 40rpx;padding: 20rpx 40rpx;text-align: center;font-weight: 550;
  background: rgba(255, 153, 0, 1);
  color: #fff;
}

</style>
